<template>
  <div class="app-container calendar-list-container">

    <el-table :data="list" v-loading="listLoading" element-loading-text="数据加载中，请稍后" border fit highlight-current-row :default-sort="{prop: 'inTime', order: 'descending'}" style="width: 100%">

      <el-table-column align="center" label="ID" min-width="50">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="50" align="center" label="VIP类型id" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.type}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100" align="center" label="VIP类型名称" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.typeName}}</span>
        </template>
      </el-table-column>

      <el-table-column width="300" align="center" label="包含服务" type="expand">
        <template slot-scope="scope" style="textAlign: center" >
          <el-tag 
            v-for="(item, index) of scope.row.service" 
            :key="index" 
            style="margin-right: 10px; margin-bottom: 10px;"
          >{{ item.services }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="createTime" label="创建时间" min-width="100" >
        <template slot-scope="scope">{{scope.row.createTime|dateformat('YYYY-MM-DD HH:mm')}} </template>
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="small" @click="handleModifyStatus(scope.row)">编辑</el-button>
          <!-- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30,50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog top="4%" width="70%" title="编辑页" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form  label-width="100px">
        <el-form-item ref="temp" :rules="rules" :model="temp" label-position="right" label-width="100px" style='width: 70%; margin-left:50px;'>
            <el-form-item class="vip" label="vip类型id：" prop="type">
                <span>{{temp.type}}</span>
            </el-form-item>
            <el-form-item class="vip" label="vip类型名称：" prop="typeName">
                <el-input style="width:300px;" v-model="temp.typeName" placeholder="请输入vip类型名称"></el-input>
            </el-form-item>
            <el-form-item class="vip" label="VIP类型包含服务：" prop="services">
                <el-select v-model="service" multiple placeholder="请选择（可多选）" @change="getServiceIds" track-by="value" label="label">
                    <el-option
                    v-for="item in serviceIds"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <br>
                <ul >
                  <li style="marginRight: 0px" v-for="(item, index) of this.serviceName" :key="index">{{ item }}</li>
                </ul>
            </el-form-item>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="updateData()" :loading="updateButtonStatus">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { getToken } from '@/utils/auth' // 验权
import { getPageList, getDeleteVipTypeById, getUpdateVipType, getVipTypeInfoById } from '@/api/vip' // 方法

export default {
  name: 'type',
  components: { },
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      dialogFormVisible: false,
      updateButtonStatus : false,
      service:[],
      serviceName:[],
      serviceIds:[
        { id:1, name:'生涯测评' },
        { id:2, name:'升学规划' },
        { id:3, name:'选科选课' },
        { id:4, name:'升学路径' },
        { id:5, name:'院校库' },
        { id:6, name:'专业库' },
        { id:7, name:'职业库' },
        { id:8, name:'升学课程' },
        { id:9, name:'模拟志愿填报' },
        { id:10, name:'正式志愿填报' },
        { id:11, name:'研学实践' },
        { id:12, name:'升学服务' },
        { id:13, name:'高一研学团' },
        { id:14, name:'高二研学团' },
        { id:15, name:'高三研学团' }
      ],
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      temp:{
        id:null,
        typeName:null,
        services:null
      },
      rules:{}
    }
  },
  mounted() {
    this.getList()
    this.headers = { accessToken: getToken() }
  },
  methods: {
    handleClose() {
      this.$confirm('数据未保存，确认关闭？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogFormVisible = false
      }).catch(() => {})
    },
    getServiceIds(){
      let arr = new Array()
      arr = this.service
      const str = arr.join(',')
      this.temp.services = str
    },
    getList() {
      this.listLoading = true
      const params = this.listQuery
      getPageList(params).then(response => {
        const { code, data: { total, list } } = response
        if (code == 0) {
          this.total = total
          this.list = list
          this.listLoading = false
        }
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    //查看详情
    handleModifyStatus(row) {
      getVipTypeInfoById(row.id).then(response => {
        const { code, data } = response
        this.temp = data
        this.temp.id = row.id
        let arr = new Array()
        arr = data.service
        this.serviceName = []
        arr.forEach(e => {
          this.serviceName.push(e.services)
        })
        this.dialogFormVisible = true
      })
    },
    //修改包含服务
    updateData() {
      this.updateButtonStatus = true
      getUpdateVipType(this.temp).then(response => {
        const { code, message } = response
        if (code == 0) {
          this.service = []
          this.serviceName = []
          this.getList()
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
        }else{
          this.$message({
            title: '失败',
            message: message,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(err => {})
        .finally(() => {
          this.updateButtonStatus = false
        })
    },
    //删除
    handleDelete(idx, row) {
      const { id } = row
      this.$confirm('确定要进行删除操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDeleteVipTypeById(id).then(response => {
          const { code } = response
          if (code == 0) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            const index = this.list.indexOf(idx)
            this.list.splice(idx, 1)
            this.total--
          } else {
            this.$notify({
              title: '失败',
              message: '删除失败',
              type: 'error',
              duration: 2000
            })
          }
        })
      }).catch(() => {
      })
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

.viewShow {
  /deep/ .el-dialog {
    width: 350px;
    height: 760px;
    padding: 100px 12px;
    border-radius: 50px;
    background: url('../../assets/phone.png') no-repeat;
    background-size: 100% 100%; 

    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__body {
      padding: 0;
      background: #fff;
      width: 100%;
      height: 100%;

      .information-cont{
        padding: 0 15px;
        background: #fff;
        white-space:normal; 
        word-break:break-all;
        height: 100%;
        overflow-y: auto;

        h3 {
          font-size: 20px;
          line-height: 32px;
          color: #333333;
          font-weight: bold;
          padding-top: 15px;
          margin: 0;

        }

        .smallLine{
          display: flex;
          display: -webkit-flex;
          justify-content:space-between;
          -webkit-justify-content: space-between;
          align-items: center;
          -webkit-align-items: center;
          font-size: 13px;
          color: #BBB;
          padding-top: 20px;
          padding-bottom: 17px;
          border-bottom: 1px solid #E5E8ED;
          .watch {
            padding: 0 0 0 20px;
            font-size: 17px;
            color: #C7C7C7;
          }
        }

        .artical-cont{
          padding-top: 16px;
          font-size: 15px;
          overflow: hidden;
          img{
            width: 100%;
          }
        }

      }

    }

  }

}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.app-container {
  padding: 20px;
}
.pagination-container {
  margin-top: 30px;
}
.widht{
  width: 180px;
}
.timeWidht{
  width: 300px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.vip {
    margin-top: 20px;
}

</style>
